<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String basepath = request.getContextPath(); %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>蜂流器</title>
    <meta name="description" content="">
    <meta name="author" content="templatemo">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700' rel='stylesheet'
          type='text/css'>
    <link href="<%=basepath%>/css/font-awesome.min.css" rel="stylesheet">
    <link href="<%=basepath%>/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=basepath%>/css/templatemo-style.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- Left column -->
<div class="templatemo-flex-row">
    <div class="templatemo-sidebar">
        <header class="templatemo-site-header">
            <h1>数据库管理</h1>
        </header>
        <div class="profile-photo-container">
            <center><img src="<%=basepath%>/img/profile-photo.png" alt="Profile Photo" class="img-responsive"></center>
        </div>
        <br>
        <!--         Search box
                <form class="templatemo-search-form" role="search">
                  <div class="input-group">
                      <button type="submit" class="fa fa-search"></button>
                      <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                  </div>
                </form> -->
        <div class="mobile-menu-icon">
            <i class="fa fa-bars"></i>
        </div>
        <nav class="templatemo-left-nav">
            <ul>
                <li><a href="<%=basepath%>/index.jsp"><i class="fa fa-database fa-fw"></i>任务管理</a></li>
                <li><a href="<%=basepath%>/step1.jsp"><i class="fa fa-database fa-fw"></i>&nbsp;&nbsp;&nbsp;&nbsp;-1.
                    选择目标数据库</a></li>
                <li><a href="<%=basepath%>/step2.jsp" class="active"><i class="fa fa-database fa-fw"></i>&nbsp;&nbsp;&nbsp;&nbsp;-2.
                    选择开放表与列</a></li>
                <li><a href="<%=basepath%>/step3.jsp"><i class="fa fa-database fa-fw"></i>&nbsp;&nbsp;&nbsp;&nbsp;-3.
                    确认上传</a></li>
            </ul>
        </nav>
    </div>
    <div class="templatemo-content col-1 light-gray-bg" id="contentBox">
        <!-- navi -->
        <div class="templatemo-top-nav-container">
            <div class="row">
                <nav class="templatemo-top-nav col-lg-12 col-md-12">
                    <ul class="text-uppercase">
                        <li><a class="active" onclick="changeContent(this,0)">选择开放表与列</a></li>
                        <!-- <li><a onclick="changeContent(this,1)">添加/修改</a></li> -->
                    </ul>
                </nav>
            </div>
        </div>
        <!-- main content -->
        <div class="templatemo-content-container selectConditionTable">
            <div class="templatemo-content-widget no-padding">
                <c:if test="${empty tables}">
                    <h3 style="text-align: center;"><b>数据为空!</b></h3><br/>
                </c:if>
                <c:forEach var="item1" items="${tables}" varStatus="status">
                    <h3><b> 表 ${status.index+1}: </b><b>${item1.key}</b>
                    </h3>
                    <br/>
                    <form class="form-inline">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">增量更新字段:</div>
                                <input type="text" class="form-control" style="width: 400px" placeholder="(建议输入主键id或日期这样的可增量的列名)" />
                            </div>
                        </div>
                    </form>
                    <br />
                    <div class="panel panel-default table-responsive">
                        <table class="table table-striped table-bordered templatemo-user-table" name="selectTable">
                            <thead>
                            <tr>
                                <td><a href="" class="white-text templatemo-sort-by"># <span class="caret"></span></a>
                                </td>
                                <td><a href="" class="white-text templatemo-sort-by">列名 <span class="caret"></span></a>
                                </td>
                                <td><a href="" class="white-text templatemo-sort-by">描述<span class="caret"></span></a>
                                </td>
                                <td><a href="" class="white-text templatemo-sort-by">过滤条件<span class="caret"></span></a>
                                </td>
                            </tr>
                            </thead>
                            <tbody id="listBody">
                            <c:forEach var="item2" items="${item1.value}" varStatus="status">
                                <tr>
                                    <td>${status.index+1}</td>
                                    <c:forEach var="item3" items="${item2}">
                                        <c:if test="${empty item3}">
                                            <td></td>
                                        </c:if>
                                        <c:if test="${not empty item3 }">
                                            <td>${item3}</td>
                                        </c:if>
                                    </c:forEach>
                                    <td><input type="text" value="" placeholder="(sql where条件)"/></td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </c:forEach>
            </div>
            <button type="button" class="btn btn-info pull-right" style="margin:0 auto" onclick="submitSelection(this)">
                确认选择并提交
            </button>
            <div style="clear:both"></div>
        </div>
        <footer class="text-right">
            <p>Copyright &copy; 2016 语义信息科技有限公司
                | Designed by <a href="http://www.usources.cn" target="_blank">USources</a></p>
        </footer>
    </div>
</div>

<!-- JS -->
<script type="text/javascript" src="<%=basepath%>/js/jquery-2.1.0.min.js"></script>      <!-- jQuery -->
<script type="text/javascript" src="<%=basepath%>/js/templatemo-script.js"></script>      <!-- Templatemo Script -->
<script type="text/javascript">
    $(function () {
        function initTableCheckbox() {
            var $thr = $('table[name="selectTable"] thead tr');
            var $checkAllTh = $('<td><input type="checkbox" id="checkAll" name="checkAll" style="display:inline-block" /></td>');
            /*将全选/反选复选框添加到表头最前，即增加一列*/
            $thr.prepend($checkAllTh);
            /*“全选/反选”复选框*/
            var $checkAll = $thr.find('input');
            $checkAll.click(function (event) {
                var $trs = $(this).parent().parent().parent().next().children("tr");
                /*将所有行的选中状态设成全选框的选中状态*/
                $trs.find('input').prop('checked', $(this).prop('checked'));
                /*并调整所有选中行的CSS样式*/
                if ($(this).prop('checked')) {
                    $trs.find('input').parent().parent().addClass('warning');
                } else {
                    $trs.find('input').parent().parent().removeClass('warning');
                }
                /*阻止向上冒泡，以防再次触发点击操作*/
                event.stopPropagation();
            });
            /*点击全选框所在单元格时也触发全选框的点击操作*/
            $checkAllTh.click(function () {
                $(this).find('input').click();
            });
            var $tbr = $('table[name="selectTable"] tbody tr');
            var $checkItemTd = $('<td><input type="checkbox" name="checkItem" style="display:inline-block" /></td>');
            /*每一行都在最前面插入一个选中复选框的单元格*/
            $tbr.prepend($checkItemTd);
            /*点击每一行的选中复选框时*/
            $tbr.find('input').click(function (event) {
                /*调整选中行的CSS样式*/
                $(this).parent().parent().toggleClass('warning');
                /*如果已经被选中行的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态*/
                $checkAll.prop('checked', $tbr.find('input:checked').length == $tbr.length ? true : false);
                /*阻止向上冒泡，以防再次触发点击操作*/
                event.stopPropagation();
            });
            /*点击每一行时也触发该行的选中操作*/
//            $tbr.click(function () {
//                $(this).find('input').click();
//            });
        }

        initTableCheckbox();
    });
    function submitSelection(e) {
        $(e).text("正在提交...").attr("onclick","");
        var tables = [];
        for (var i = 0; i < $(".table").length; i++) {
            var tableEle = {};
            var tableName = $(".table").eq(i).parent().prev().prev().prev().prev().children(":eq(1)").html();
            var updateColumn = $(".table").eq(i).parent().prev().prev().children().children().children(":eq(1)").val();
            var tableColoumns = [];
            var inputs = $(".table").eq(i).children(":eq(1)").children("tr").children("td").children("input");
            var hasCheckColumn = false;
            for (var j = 0; j < inputs.length; j++) {
                if ($(inputs).eq(j).attr("type") == 'checkbox' && $(inputs).eq(j).prop("checked")) {
                    var columnEle = {};
                    var columnName = $(inputs).eq(j).parent().next().next().html();
                    var columnComment = $(inputs).eq(j).parent().next().next().next().html();
                    var filterCondition = $(inputs).eq(j).parent().next().next().next().next().children().val();
                    columnEle.columnName = columnName;
                    columnEle.columnComment = columnComment;
                    columnEle.filterCondition = filterCondition;
                    tableColoumns.push(columnEle);
                    hasCheckColumn = true;
                }
            }
            tableEle.updateColumn = updateColumn;
            if (hasCheckColumn) {
                tableEle.tableName = tableName;
                tableEle.tableColoumns = tableColoumns;
                tables.push(tableEle);
            }
        }
        var tablesJson = JSON.stringify(tables);
        $.ajax({
            type: "POST",
            url: "<%=basepath%>/setWhiteNameList",
            data: {whiteNameColumns: tablesJson},
            success: function (data) {
                $(e).text("确认选择并提交").attr("onclick","submitSelection(this)");
                if (data == "1") {
                    window.location.href = "<%=basepath%>/step3.jsp";
                } else {
                    alert("您没有正确选择开放的table或者生成ttl文件错误");
                }
            },
            error: function (error) {
                console.log(error);
                $(e).text("确认选择并提交").attr("onclick","submitSelection(this)");
                alert("网络异常,请稍后重试!");
            }
        });
    }
</script>
</body>
</html>